<template>
    


<div >
   
    <el-button type="primary" size="mini"  @click="toggleShow">图片</el-button>
	<my-upload field="img"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        v-model="show"
		:height=20
		:width=20
        :noCircle='true'
        :noSquare='true'
		img-format="png"></my-upload>

</div>
</template>
<script>

	import Vue from 'vue';
	import myUpload from 'vue-image-crop-upload';

	export default{

		data() {
             return {
                      show:false,
                      ImageSource:''
                    }
            
        },

        props:
        {
            param:""
           // value:""
            
        },

       
		components: {
			'my-upload': myUpload
        },
        
        computed:{
            ImageSource:{
               get:function (){
                return this.ImageSource;
            },
               set:function(newValue)
               {
                   this.value=newValue;
               }
            }

           

           
        },
		methods: {

            GetNewImage()
            {
                this.$emit("evGotImage",this.imageUrl);
            },

			toggleShow() {
				this.show = !this.show;
			},
            /**
			 * crop success
			 *
			 * [param] imgDataUrl
			 * [param] field
			 */
			cropSuccess(url, field){
				console.log('-------- crop success --------');
				this.ImageSource = url;
			
                this.$emit("input",this.ImageSource);
              //  this.$emit("HasGotImage",this.param,this.imgDataUrl);
                //this.$emit("evHasGotImage",this.imageUrl);

			},
			/**
			 * upload success
			 *
			 * [param] jsonData   服务器返回数据，已进行json转码
			 * [param] field
			 */
			cropUploadSuccess(jsonData, field){
				console.log('-------- upload success --------');
				console.log(jsonData);
				console.log('field: ' + field);
			},
			/**
			 * upload fail
			 *
			 * [param] status    server api return error status, like 500
			 * [param] field
			 */
			cropUploadFail(status, field){
				console.log('-------- upload fail --------');
				console.log(status);
				console.log('field: ' + field);
			}
		}
	}

</script>